<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/masterLayout.xhtml">

	<ui:define name="title">COBRANZA</ui:define>
	<ui:define name="content">

		<p:growl id="mensaje" showDetail="true" life="7000" />

		<p:panel id="panel" header="COBRANZA DE FACTURAS"
			style="margin-bottom:10px;">
			<h:form id="formCliente">
				<h:panelGrid columns="3">
					<p:outputLabel value="CÉDULA/NOMBRE:" styleClass="negrita" />
					<p:inputText readonly="true"
						value="#{cobroBean.criterioBusquedaCliente.cedula} - #{cobroBean.criterioBusquedaCliente.apellido} #{cobroBean.criterioBusquedaCliente.nombre}"
						style="width: 445px; position: relative; left: 8px;" />
					<p:commandButton update=":formBusquedaCliente, :formNuevoCliente"
						oncomplete="PF('buscarCliente').show()"
						action="#{cobroBean.limpiarObjetosBusquedaCliente}"
						icon="ui-icon-plus" style="left: 11px;" />
				</h:panelGrid>

				<h:panelGrid columns="3">
					<p:outputLabel value="DIRECCIÓN:" styleClass="negrita" />
					<p:outputLabel
						value="#{cobroBean.criterioBusquedaCliente.direccion} - #{cobroBean.criterioBusquedaCliente.referencia}"
						style="padding-left: 33px;" />
					<p:outputLabel />

					<h:outputText value="FECHAS:" />
					<p:calendar value="#{cobroBean.criterioBusquedafechaInicio}" />
					<p:calendar value="#{cobroBean.criterioBusquedafechaFin}" />

					<h:outputText value="# DOCUMENTO" />
					<p:inputText value="#{cobroBean.criterioBusquedaDocumento}"
						onblur="this.value=this.value.toUpperCase();" />
					<p:commandButton
						update="formCliente, :formDataTable:tablaEgresos, :mensaje"
						icon="#{msg['iconoBuscar']}"
						actionListener="#{cobroBean.obtenerFacturasPendientes}" />
				</h:panelGrid>
			</h:form>
		</p:panel>

		<p:dialog header="BUSCAR CLIENTE" widgetVar="buscarCliente"
			resizable="false" modal="fasle" showEffect="clip" hideEffect="fold"
			id="dialogoCliente" width="50%">

			<h:form id="formBusquedaCliente">
				<p:outputLabel value="CEDULA/RUC/NOMBRE/APELLIDO:"
					styleClass="negrita" />
				<p:inputText id="comboCedula"
					value="#{cobroBean.criterioClienteBusqueda}"
					onblur="this.value=this.value.toUpperCase();" />

				<p:commandButton
					update="comboCedula, :formNuevoCliente:tablaClientes, :mensaje"
					icon="#{msg['iconoBuscar']}"
					actionListener="#{cobroBean.obtenerClientesPorBusqueda}" />

			</h:form>

			<h:form id="formNuevoCliente">
				<p:dataTable id="tablaClientes" var="cliente"
					value="#{cobroBean.listaClienteBusqueda}" paginator="true"
					rows="10" emptyMessage="#{msg['lbl.mensajeTabla']}"
					paginatorPosition="bottom" rowKey="#{cliente.personaid}"
					selection="#{cobroBean.criterioBusquedaCliente}"
					selectionMode="single">

					<p:ajax event="rowSelect" update=":formCliente"
						listener="#{cobroBean.cargarCliente}"
						oncomplete="PF('buscarCliente').hide()" />

					<p:column headerText="CEDULA" style="text-align:center;">
							 	#{cliente.cedula}
						</p:column>

					<p:column headerText="APELLIDO" style="text-align:center;">
							 	#{cliente.apellido}
						</p:column>

					<p:column headerText="NOMBRE" style="text-align:center;">
							 	#{cliente.nombre}
						</p:column>

				</p:dataTable>
			</h:form>

		</p:dialog>

		<h:form id="formDataTable">

			<p:dataTable id="tablaEgresos" var="egreso"
				value="#{cobroBean.listaEgresos}" selectionMode="multiple"
				selection="#{cobroBean.listaEgresosSeleccionados}"
				rowKey="#{egreso.id}">

				<f:facet name="header">
					<p:outputLabel value="LISTADO DE FACTURAS" />
				</f:facet>

				<p:ajax event="rowSelect" listener="#{cobroBean.onRowSelect}"
					update=":formDataTable:tablaEgresos, :mensaje" />

				<p:ajax event="rowUnselect" listener="#{cobroBean.onRowUnselect}"
					update=":formDataTable:tablaEgresos" />

				<p:column headerText="■" style="text-align:center;">
					<p:selectBooleanCheckbox disabled="true" value="#{egreso.escogido}" />
				</p:column>

				<p:column headerText="ORDEN" style="text-align:center;">
				 	#{egreso.orden eq 0 ? "" : egreso.orden}
				</p:column>

				<p:column headerText="GESTIONAR" style="text-align:center;">
					<p:tooltip for="btnPagar" value="VER CUOTAS" />
					<p:commandButton id="btnPagar" update=":formPago"
						oncomplete="PF('dialogoClientePago').show()"
						icon="ui-icon-bookmark" action="#{cobroBean.cargarEgreso}">
						<f:setPropertyActionListener value="#{egreso}"
							target="#{cobroBean.cobroReporte}" />
					</p:commandButton>

				</p:column>

				<p:column headerText="CLIENTE" style="text-align:center;">
				 	#{egreso.cliente}
				</p:column>

				<p:column headerText="TIPO DOCUMENTO" style="text-align:center;">
				 	#{egreso.tipoDocumento}
				</p:column>

				<p:column headerText="# DOCUMENTO" style="text-align:center;">
				 	#{egreso.codigoDocumento}
				</p:column>

				<p:column headerText="FECHA EMISION" style="text-align:center;">
					<p:outputLabel value="#{egreso.fechaEmision}">
						<f:convertDateTime pattern="dd/MM/yyyy"
							timeZone="America/Guayaquil" />
					</p:outputLabel>
				</p:column>

				<p:column headerText="TOTAL" style="text-align:center;">
					#{egreso.total}
				</p:column>

				<p:column headerText="ABONOS" style="text-align:center;">
					#{egreso.abono}
				</p:column>

				<p:column headerText="SALDO" style="text-align:center;">
					#{egreso.saldo}
				</p:column>

				<p:columnGroup type="footer">
					<p:row>
						<p:column colspan="7" footerText="TOTALES: "
							style="text-align:right" />

						<p:column footerText="$ #{cobroBean.totalTotal}" />
						<p:column footerText="$ #{cobroBean.totalAbonos}" />
						<p:column footerText="$ #{cobroBean.totalSaldo}" />

					</p:row>
				</p:columnGroup>

				<f:facet name="footer">
					<p:commandButton process="tablaEgresos" value="PAGAR"
						disabled="#{cobroBean.bn}"
						actionListener="#{cobroBean.comprobarEgresosSeleccionados}"
						oncomplete="comprobarEgresosSeleccionados(xhr, status, args)"
						update=":formTablaPagosCredito, :formPagarCredito, :mensaje" />
				</f:facet>
			</p:dataTable>
		</h:form>

		<p:dialog header="COBRO DEUDAS" widgetVar="dialogoPagarCredito"
			resizable="false" modal="fasle" showEffect="clip" hideEffect="fold"
			id="dialogoPagarCredito" width="50%">

			<h:form id="formPagarCredito">

				<p:focus context="formPagarCredito" />

				<h:panelGrid columns="2" cellpadding="5">

					<p:outputLabel value="TIPO DE PAGO" />
					<p:selectOneMenu styleClass="comboCedula"
						value="#{cobroBean.tiposPago.tipopagoid}" filter="true"
						filterMatchMode="contains">
						<f:selectItem itemLabel="ESCOJA UN TIPO DE PAGO" />
						<f:selectItems value="#{cobroBean.listTiposPago}" var="tipoPago"
							itemValue="#{tipoPago.tipopagoid}" itemLabel="#{tipoPago.nombre}" />
						<p:ajax event="change" update="formPagarCredito"
							listener="#{cobroBean.tipoPago}" />
					</p:selectOneMenu>

					<p:outputLabel value="MONTO" />
					<p:inputText value="#{cobroBean.pagoEntrada.cuota}" />

					<p:outputLabel value="FECHA PAGO" />
					<p:calendar value="#{cobroBean.fechapago}" navigator="true" />

					<p:outputLabel value="BANCO" rendered="#{cobroBean.bnBanco}" />
					<p:selectOneMenu styleClass="comboCedula"
						rendered="#{cobroBean.bnBanco}"
						value="#{cobroBean.pagoEntrada.banco}" filter="true"
						filterMatchMode="contains">
						<f:selectItem itemLabel="ESCOJA UN BANCO" itemValue="" />
						<f:selectItems value="#{bancoBean.listaBancos}" var="banco"
							itemValue="#{banco.nombre}" itemLabel="#{banco.nombre}" />
					</p:selectOneMenu>

					<p:outputLabel value="FECHA GIRO" rendered="#{cobroBean.bnBanco}" />
					<p:calendar value="#{cobroBean.pagoEntrada.fechagiro}"
						navigator="true" rendered="#{cobroBean.bnBanco}" required="true"
						requiredMessage="ESCOJA UNA FECHA GIRO" />

					<p:outputLabel value="FECHA DE COBRO"
						rendered="#{cobroBean.bnBanco}" />
					<p:calendar value="#{cobroBean.pagoEntrada.fechacheque}"
						navigator="true" rendered="#{cobroBean.bnBanco}" required="true"
						requiredMessage="ESCOJA UNA FECHA COBRO" />

					<p:outputLabel value="#{cobroBean.chequeTarjetaVaucher}"
						rendered="#{cobroBean.bnTarjeta}" />
					<p:inputText value="#{cobroBean.pagoEntrada.chequevaucher}"
						rendered="#{cobroBean.bnTarjeta}" required="true"
						requiredMessage="INGRESE NUMERO CHEQUE/VAUCHER" />

					<p:outputLabel value="#{cobroBean.chequeTarjetaCuenta}"
						rendered="#{cobroBean.bnTarjeta}" />
					<p:inputText value="#{cobroBean.pagoEntrada.cuentatarjeta}"
						rendered="#{cobroBean.bnTarjeta}" required="true"
						requiredMessage="INGRESE NUMERO CUENTA/TARJETA" />

					<p:commandButton value="AGREGAR PAGO"
						actionListener="#{cobroBean.insertarPagoEntrada}"
						update="formPagarCredito, :formTablaPagosCredito :mensaje" />

				</h:panelGrid>
			</h:form>

			<h:form id="formTablaPagosCredito">
				<p:dataTable id="tablaPagosCredito" var="pagoEntrada"
					value="#{cobroBean.listaPagoEntrada}">


					<p:column headerText="GESTIONAR" style="text-align:center">

						<p:commandButton id="btnMostrar" icon="ui-icon-trash"
							action="#{cobroBean.eliminarPagoEntrada}"
							update="tablaPagosCredito">
							<f:setPropertyActionListener value="#{pagoEntrada}"
								target="#{cobroBean.pagoEntrada}" />
						</p:commandButton>

					</p:column>

					<p:column headerText="FECHA DE PAGO">
						<p:outputLabel value="#{pagoEntrada.fechapago}">
							<f:convertDateTime pattern="dd/MM/yyyy"
								timeZone="America/Guayaquil" />
						</p:outputLabel>
					</p:column>

					<p:column headerText="TIPO DE PAGO">
							#{pagoEntrada.tipopago.nombre}		
						</p:column>

					<p:column headerText="CUOTA">
							#{pagoEntrada.cuota}		
						</p:column>

					<p:columnGroup type="footer">
						<p:row>
							<p:column colspan="3" footerText="TOTAL: "
								style="text-align:right" />

							<p:column footerText="$ #{cobroBean.totalCuota}" />
						</p:row>
					</p:columnGroup>

				</p:dataTable>
			</h:form>

			<br />
			<p:commandButton value="GUARDAR" icon="ui-icon-disk"
				update=":formCliente, :formDataTable:tablaEgresos, :mensaje"
				actionListener="#{cobroBean.insertarCobro}"
				oncomplete="comprobarDialogoPago(xhr, status, args)" />

			<p:commandButton value="CANCELAR" icon="ui-icon-close"
				update="formPagarCredito"
				oncomplete="PF('dialogoPagarCredito').hide()" process="@this"
				actionListener="#{cobroBean.limpiar}" />

		</p:dialog>

		<p:dialog header="DETALLES DE PAGOS" widgetVar="dialogoClientePago"
			resizable="false" modal="fasle" showEffect="clip" hideEffect="fold"
			width="50%">

			<h:form id="formPago">

				<p:dataTable id="tablaEntrada" var="entrada"
					value="#{cobroBean.egreso.entradas}" paginator="true" rows="6"
					emptyMessage="No hay informacion disponible."
					paginatorPosition="bottom">

					<p:column style="width:16px">
						<p:rowToggler />
					</p:column>

					<p:column headerText="FECHA DE PAGO">
						<p:outputLabel value="#{entrada.fechapago}">
							<f:convertDateTime pattern="dd/MM/yyyy"
								timeZone="America/Guayaquil" />
						</p:outputLabel>
					</p:column>

					<p:column headerText="PAGADO"
						style="text-align:center;width: 50px;">
						<p:selectBooleanCheckbox disabled="true" value="#{entrada.pagado}" />
					</p:column>

					<p:column headerText="MONTO">
								#{entrada.cuota}
							</p:column>

					<p:rowExpansion>
						<p:dataTable id="tablaPagosEntrada" var="pagoEntrada"
							value="#{entrada.pagoentradas}">

							<p:column headerText="TIPO DE PAGO">
							#{pagoEntrada.tipopago.nombre}		
						</p:column>

							<p:column headerText="FECHA">
								<p:outputLabel value="#{pagoEntrada.fechapago}">
									<f:convertDateTime pattern="dd/MM/yyyy"
										timeZone="America/Guayaquil" />
								</p:outputLabel>
							</p:column>

							<p:column headerText="CUOTA">
							#{pagoEntrada.cuota}		
						</p:column>

						</p:dataTable>
					</p:rowExpansion>

				</p:dataTable>
			</h:form>

		</p:dialog>

		<script type="text/javascript">
			//<![CDATA[
			function comprobarDialogoPago(xhr, status, args) {
				if (!args.error) {
					PF('dialogoPagarCredito').hide()
				}
			}
			function comprobarEgresosSeleccionados(xhr, status, args) {
				if (!args.error1) {
					PF('dialogoPagarCredito').show()
				}
			}
			//]]>
		</script>
	</ui:define>

</ui:composition>
</html>